<template>
	<view class="tap">
		<view class="left">
			<p class="txt">共<span class="red">{{allnum}}</span>件商品</p>
		</view>
	</view>
	<uni-swipe-action-item class="box" v-for="e in lists" :key="e.goods.goods_id">
		<view class="content">
			<view class="left">
				<radio :checked="e.key" style="transform:scale(0.5)" @tap='changeSom(e)' />
				<img :src="e.goods.goods_image" class="img" @tap="goDetail(e.goods.goods_id)">
			</view>
			<view class="right">
				<view class="top" @tap="goDetail(e.goods.goods_id)">
					{{e.goods.goods_name}}
				</view>
				<view class="bot">
					<text @tap="goDetail(e.goods.goods_id)">￥{{e.goods.goods_price_max}}</text>
					<uni-number-box v-model.number="e.goods_num" :min="1" @change="changeNum($event,e.goods_id)"
						@blur="changeNum($event,e.goods_id)"></uni-number-box>
				</view>
			</view>
		</view>
		<template v-slot:right>
			<button @tap="delCart(e.id)">删除</button>
		</template>
	</uni-swipe-action-item>
	<view class="bottom">
		<label class="left">
			<radio :checked="allSelsct" style="transform:scale(0.5)" @tap='changeAll()' /><text>全选</text>
		</label>
		<view class="right">
			<view class="total">
				合计: <text class="icon">￥</text>
				<span class="mony">
					<label>{{allPrice[1]}}</label>
				</span>
			</view>
			<view class="pay">
				<button type="primary" :disabled="disableBtn">结算({{allPrice[0]}})</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		cartListApi,
		cartUpdateApi,
		delCartApi
	} from '@/apis/cart.js'
	import {
		computed,
		ref
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	// *****************获取购物车列表业务
	const lists = ref([])
	const goodsNum = ref('')
	const getList = async () => {
		const res = await cartListApi()
		res.data?.list?.forEach(item => item.key = false)
		lists.value = res.data?.list
	}
	onShow(() => {
		getList()
	})

	// *****************修改数量值
	// 防抖优化
	const timer = ref('')
	const changeNum = (e, id) => {
		clearTimeout(timer.value)
		timer.value = setTimeout(async () => {
			const res = await cartUpdateApi(id, e)
			if (res.status !== 200) return
		}, 1000)
	}
	// *****************删除功能
	const delCart = async (id) => {
		const res = await delCartApi(id)
		if (res.status !== 200) return
		getList()
	}
	// *****************大小选业务
	// 所有小选点击事件
	const changeSom = (val) => {
		val.key = !val.key
		uni.setStorageSync('lists', lists.value)
	}
	// 大选
	const changeAll = () => {
		let flag = !allSelsct.value
		lists.value?.forEach(e => e.key = flag)
		uni.setStorageSync('lists', lists.value)
	}
	// 计算小选选大选
	const allSelsct = computed(() => {
		return lists.value?.every(e => e.key)
	})
	// 结算按钮禁用状态
	const disableBtn = computed(() => {
		const res = lists.value?.find(e => e.key === true)
		return res ? false : true
	})
	// *****************计算总价总数
	// 计算所有总数
	const allnum = computed(() => {
		let num = 0 //总数
		lists.value?.forEach(e => num += e.goods_num)
		return num
	})
	// 计算选择后的总价、总数
	const allPrice = computed(() => {
		let num = 0 //总数
		let price = 0 //总价格
		const arr = lists.value?.filter(e => e.key)
		arr?.forEach(e => price += e.goods_num * e.goods.goods_price_max)
		arr?.forEach(e => num += e.goods_num)
		return [num, price]
	})
	// *****************跳转详情页
	const goDetail = (id) => {
		uni.navigateTo({
			url: '/pages/detail/detail?id=' + id
		})
	}
</script>

<style lang="scss">
	.tap {
		width: 100%;
		height: 80rpx;
		padding: 30rpx 14rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.left {
			.txt {
				font-size: 28rpx;
				color: #333;
			}
		}

		.rigth {
			.txt {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.red {
		color: red;
	}

	.box {
		.uni-swipe {
			padding-bottom: 50rpx;

			.uni-swipe_text--center {
				width: 750rpx;
				height: 284rpx;
				box-sizing: border-box;
				background: #fff;
				margin: 0rpx 16rpx 4rpx;
				border-radius: 10rpx;
			}

			.button-group--right {
				width: 100rpx;
				background: #bf4e49;
				border-radius: 10rpx;

				button {
					color: #fff;
					font-size: 22rpx;
					display: flex;
					align-items: center;
					height: 100%;
					border: none;
					background: transparent;
				}

			}
		}

		.content {
			width: 100%;
			height: 260rpx;
			padding: 30rpx 16rpx;
			display: flex;
			align-content: center;
			justify-content: space-between;
			box-sizing: border-box;

			.left {
				display: flex;
				align-items: center;
				margin-right: 15rpx;

				.img {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				height: 200rpx;
				align-content: space-between;

				.top {
					// .text {
					width: 400rpx;
					font-size: 32rpx;
					overflow: hidden;
					overflow-wrap: break-word;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					// }

				}

				.bot {
					text {
						font-size: 32rpx;
						color: red;
					}

					width: 100%;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

	.bottom {
		width: 100%;
		height: 96rpx;
		padding: 0 30rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		z-index: 5;

		.left {}

		.right {
			display: flex;
			align-items: center;

			.icon {
				font-size: 24rpx;
			}

			.mony {
				font-size: 32rpx;
				color: red;
			}

			.pay {
				button {
					width: 200rpx;
					height: 72rpx;
					margin-left: 15rpx;
					border-radius: 50px;
					border: none;
					// background: #ff9779;
					color: #fff;
					font-size: 28rpx;
					text-align: center;
				}
			}
		}
	}
</style>